<template>
  <div class="app-container">
    <el-date-picker style="margin-bottom: 10px" v-model="baseDateArr" type="daterange" range-separator="至"
      start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :clearable="false"
      @change="getBaseStat">
    </el-date-picker>

    <!-- 对账数据 -->
    <el-card style="margin-bottom: 20px">
      <div slot="header" class="clearfix">
        <div class="card-title">对账数据</div>
      </div>

      <div class="card-1">
        <div class="card-1-table">
          <el-table :data="tableData1" :border="true" style="width: 100%" :span-method="arraySpanMethod">
            <!-- 订单类型 -->
            <el-table-column prop="col1" label="订单类型" width="230">
            </el-table-column>
            <!-- 订单数(个) -->
            <el-table-column prop="col2" label="订单数(个)"> </el-table-column>
            <!-- 订单总金额(元) -->
            <el-table-column prop="col3" label="订单总金额(元)">
            </el-table-column>
            <!-- 退款总金额(元) -->
            <el-table-column prop="col4" label="退款总金额(元)">
            </el-table-column>
            <!-- 运营商分润总金额(元) -->
            <el-table-column prop="col5" label="运营商分润总金额(元)">
            </el-table-column>
            <!-- 预充值到账金额 -->
            <el-table-column prop="col6" label="预充值到账金额(元)">
            </el-table-column>
            <!-- 预充值消费金额 -->
            <el-table-column prop="col7" label="预充值消费金额(元)">
            </el-table-column>
            <!-- 手续费总金额(元) -->
            <el-table-column prop="col8" label="手续费总金额(元)">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <!-- 分账详情 -->
    <el-card style="margin-bottom: 20px">
      <div slot="header" class="clearfix">
        <div class="card-title">分账数据详情</div>
      </div>
      <serviceDetail ref="serviceDetail" :dateArr="baseDateArr" />
    </el-card>
  </div>
</template>
<script>
import moment from "moment";
import { getServiceAnalysisAPI } from "@/api/charge/serviceAnalysis";
import serviceDetail from "./components/serviceDetail.vue";
import Decimal from "decimal.js";

export default {
  components: { serviceDetail },
  data() {
    return {
      moment,
      baseDateArr: [
        moment().add(-1, "months").format("yyyy-MM-DD"),
        moment().format("yyyy-MM-DD"),
      ],

      // 基础数据
      tableData1: [],
    };
  },
  mounted() {
    this.getBaseStat(this.baseDateArr);
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 6) {
        if (rowIndex === 1) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        }
      }
    },
    // 基础数据
    getBaseStat(dateArr) {
      this.$refs.serviceDetail.getList();

      getServiceAnalysisAPI({
        startTime: dateArr[0],
        endTime: dateArr[1],
      }).then((response) => {
        let res = response.data;
        this.tableData1 = [
          {
            col1: "扫码充电",
            col2: new Decimal(res.orderCountCharge).toFixed(2),
            col3: new Decimal(res.orderAmountCharge).toFixed(2),
            col4: new Decimal(res.refundAmountCharge).toFixed(2),
            col5: new Decimal(res.orderAmountCharge)
              .minus(res.refundAmountCharge)
              .minus(res.serviceChargeCharge)
              .toFixed(2),
            col6: "-",
            col7: "-",
            col8: new Decimal(res.serviceChargeCharge).toFixed(2),
          },
          {
            col1: "线上充值（包括实体卡、钱包）",
            col2: new Decimal(res.orderCountRecharge).toFixed(2),
            col3: new Decimal(res.orderAmountRecharge).toFixed(2),
            col4: new Decimal(res.refundAmountRecharge).toFixed(2),
            col5: "-",
            col6: new Decimal(res.orderAmountRecharge)
              .minus(res.serviceChargeRecharge)
              .minus(res.refundAmountRecharge)
              .toFixed(2),
            col7: new Decimal(res.preConsume).toFixed(2),
            col8: new Decimal(res.serviceChargeRecharge).toFixed(2),
          },
          {
            col1: "线下充值（商家代充）",
            col2: new Decimal(res.offlineCount).toFixed(2),
            col3: new Decimal(res.offlineOrder).toFixed(2),
            col4: new Decimal(res.offlineOrderRefund).toFixed(2),
            col5: "-",
            col6: new Decimal(res.offlineOrder).toFixed(2),
            col7: "-",
            col8: "-",
          },
        ];
      });
    },
  },
};
</script>
<style scoped lang="scss">
.card-title {
  position: relative;
  margin-left: 10px;
  margin-bottom: 5px;
  font-size: 18px;
  color: #303133;
  font-weight: bold;

  &:after {
    content: "";
    position: absolute;
    background: #409eff;
    width: 4px;
    height: 15px;
    top: 50%;
    left: -6px;
    transform: translate(-100%, -50%);
  }
}

.card-1 {
  display: flex;

  .card-1-table {
    flex: auto;
    width: 30%;
    margin-right: 20px;

    .card-table__title {
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: bold;
    }

    &:last-child {
      margin-right: none;
    }
  }
}
</style>
